.cl-manu {
  --manu-bgc: var(--main-color-white);
  --manu-item-hover-bgc: transparent;
  --manu-font-color: var(--info-color);
  --manu-border-bottom-color: #dddee0;
  --manu-child-spacing: 5px;
  --manu-item-padding: 0 20px;
  --submanu-item-padding: 5px 10px;
  --manu-border-radius: 5px;
  --manu-active-border-color: var(--primary-color);
  --manu-active-color: #000;
  --manu-item-hover-color: #000;
  --manu-item-disabled-color: #adadad;
  --submanu-bgc: var(--manu-bgc);
  --manu-v-item-height: 40px;
  --manu-icon-size: 1em;
  height: 40px;
  display: flex;

  &:has(.vertical) {
    flex-direction: column;
    height: 100%;
    width: max-content;
  }
  &__content {
    flex: 1;
    display: flex;
    align-items: stretch;
    height: 100%;
    background-color: var(--manu-bgc);
    color: var(--manu-font-color);
    box-shadow: 0 1px 0 0 var(--manu-border-bottom-color);
    .cl-manu-item {
      box-sizing: border-box;
      padding: var(--manu-item-padding);
      position: relative;
      display: flex;
      align-items: center;
      &:has(.active.cl-manu-item),
      &.active {
        & > .title-box {
          color: var(--manu-active-color);
        }
        &::before {
          box-shadow: inset 0 -2px 0 0 var(--manu-active-border-color);
        }
      }
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        transition: background-color 300ms, box-shadow 300ms;
      }
      .title-box {
        position: relative;
        z-index: 1;
        display: flex;
        height: 100%;
        align-items: center;
        transition: color 300ms;
        & > i,
        & > .cl-icon {
          padding-right: 5px;
          font-weight: 700;
          font-size: var(--manu-icon-size);
        }
        .title {
          width: max-content;
          height: 100%;
          display: flex;
          align-items: center;
          gap: 5px;
          i.cl-down {
            transition: transform 300ms;
          }
        }
      }
      .cl-submanu {
        padding-top: var(--manu-child-spacing);
        position: absolute;
        bottom: 0;
        left: 0;
        min-width: 100%;
        width: max-content;
        opacity: 0;
        transform: translateY(100%) scaleY(0);
        transform-origin: top;
        transition: transform 300ms, opacity 300ms;
        background-color: var(--submanu-bgc);
        .cl-submanu__content {
          padding: 5px 0;
          border-radius: var(--manu-border-radius);
          box-shadow: 0 0 10px -5px var(--main-color-block);
          background-color: var(--manu-bgc);
        }
        .cl-submanu {
          padding: 0;
          padding-left: var(--manu-child-spacing);
          left: unset;
          bottom: unset;
          top: 0;
          right: 0;
          opacity: 0;
          transform: translateX(100%) scale(0);
          transform-origin: left top;
        }
        .cl-manu-item {
          padding: var(--submanu-item-padding);
          &:has(.active.cl-manu-item),
          &.active {
            & > .title-box {
              color: var(--manu-active-color);
            }
            &::before {
              box-shadow: none;
            }
          }
          .title i.cl-down {
            transform: rotate(-90deg);
          }
          &:hover {
            & > .cl-submanu {
              opacity: 1;
              transform: translateX(100%) scale(1);
            }
            & > .title-box {
              color: var(--manu-item-hover-color);
              & > .title i.cl-down {
                transform: rotate(90deg);
              }
            }
          }
          &:first-child::before {
            border-radius: var(--manu-border-radius) var(--manu-border-radius) 0 0;
          }
          &:last-child::before {
            border-radius: 0 0 var(--manu-border-radius) var(--manu-border-radius);
          }
        }
      }
      &:hover {
        &::before {
          background-color: var(--manu-item-hover-bgc);
        }
        & > .cl-submanu {
          opacity: 1;
          transform: translateY(100%) scaleY(1);
        }
        & > .title-box {
          color: var(--manu-item-hover-color);
          & > .title > i.cl-down {
            transform: rotate(180deg);
          }
        }
      }
      &.disabled {
        color: var(--manu-item-disabled-color);
        pointer-events: none;
        opacity: 0.5;
        & > .title-box {
          color: currentColor;
        }
        &::before {
          box-shadow: none;
        }
      }
    }
    &.vertical {
      --manu-active-border-color: transparent !important;
      flex-direction: column;
      width: max-content;
      box-shadow: 1px 0 0 0 var(--manu-border-bottom-color);
      .cl-manu-item {
        --manu-child-spacing: 0;
        --manu-border-radius: 0;
        height: var(--manu-v-item-height);
        flex-direction: column;
        align-items: flex-start;
        .title-box {
          height: var(--manu-v-item-height);
          & > i {
            transition: padding 0s;
          }
          & > .title {
            max-width: 50vw;
            width: max-content;
            transition: max-width 1s ease-in-out;
            overflow: hidden;
            & > i.cl-down {
              transform: rotate(-90deg);
            }
          }
        }
        .cl-submanu {
          top: 0;
          left: unset;
          right: 0;
          transform: translateX(100%) scaleX(0);
          transform-origin: left;
          height: max-content;
        }
        &:hover {
          &::before {
            background-color: var(--manu-item-hover-bgc);
          }
          & > .cl-submanu {
            opacity: 1;
            transform: translateX(100%) scaleX(1);
          }
          & > .title-box {
            color: var(--manu-item-hover-color);
            & > .title > i.cl-down {
              transform: rotate(90deg);
            }
          }
        }
      }
      &.collapse {
        & > .cl-manu-item {
          & > .title-box {
            & > i {
              padding: 0;
              transition: padding 500ms;
            }
            .title {
              max-width: 0;
              transition: max-width 500ms cubic-bezier(0, 1, 0, 1);
            }
          }
        }
      }
    }
  }
}
